<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			li{
				border-bottom: 1px solid blue;
				padding: 10px 0;
				display: flex;
				justify-content: space-around;
			}
			.userIcon,.userIcon img{
				width: 100px;
				height: 100px;
				margin-right: 15px;
			}
			.userInfo{
				flex: 1;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<!--<ul>
				<li>
					<div class="userIcon">
						<img src="cc.png" alt="" />
					</div>
					<div class="userInfo">
						<h4>标题</h4>
						<p>内容内容</p>
					</div>
				</li>
			</ul>-->
		</div>
	</body>
	<script type="text/babel">
		// 头像组件
		class UserImg extends React.Component{
			render(){
				return(
					<div className="userIcon">
						<img src={this.props.img} alt="" />
					</div>
				)
			}
		}
		// 评论信息组件
		class UserInfo extends React.Component{
			render(){
				return(
					<div className="userInfo">
						<h4>{ this.props.info.name }</h4>
						<p>{ this.props.info.info} </p>
					</div>
				)
			}
		}
		
		// 评论组件
		class CommitList extends React.Component{
			
			render(){
				return(
					<li>
						<UserImg img={this.props.userdata.icon} />
						<UserInfo info={ this.props.userdata } />
					</li>
				)
			}
		}
		
		// 评论列表组件
		class Commit extends React.Component{
			render(){
				console.log( this.props.data)
				var userList = this.props.data;
				var listMenu = userList.map((item)=> <CommitList userdata={item} />)
				return (
					<ul>
						{listMenu}
					</ul>
				)
			}
		}
		
		var list = [
			{
				icon:"cc.png",
				name:"武哥",
				info:"很帅！"
			},
			{
				icon:"cc.png",
				name:"陈珏舟",
				info:"很胖！"
			},
			{
				icon:"cc.png",
				name:"铁头",
				info:"很厉害！"
			}
		]
		ReactDOM.render(<Commit data={list} />,document.getElementById("app"))
		
		
	</script>
</html>
